// 品牌详情
import React, { useEffect, useState } from 'react';
import Taro, { useDidShow, useRouter } from '@tarojs/taro';
import { View, Image, Text, Button } from '@tarojs/components';
import TitleBar from '@/src/components/titleBar';
import classNames from 'classnames';
import './index.less';
import { AtTabs, AtTabsPane } from 'taro-ui';
import { ShareButton } from '@/src/components/shareBtn';
import store from '@/src/store';
import {
  cancelCollectionFun,
  collectionFun,
  productListFun,
} from '@/src/common/method/wikiFun';
import { observer } from 'mobx-react-lite';
import { tabListCiga } from '@/src/common/util/contant';
import CommonBlank from '@/src/components/pageBlank';
import uncollect from '../../assert/wiki/uncollect.png';
import collected from '../../assert/wiki/collected.png';
import { getNetWorkStatus } from '@/src/common/util/util';
import { netWorkErrorInfo } from '@/src/utils/constants';
import { isLoginFun } from '@/src/common/method/commonFun';

interface RouteParams {
  sku: string;
  [key: string]: string | undefined;
}

const CigaDetail = () => {
  const { params } = useRouter<RouteParams>();
  const [current, setCurrent] = useState(0);
  const [collect, setCollect] = useState<boolean>(false);
  const [list, setList] = useState<any>({});
  const [tabList, setTabList] = useState<any>(tabListCiga);
  const [prize, setPrize] = useState<boolean>(true);
  const [loadingText, setLoadingText] = useState('加载中');
  const [selectId, setSelectId] = useState<any>(0); //选中的年份
  const [tastList, setTastList] = useState<Array<any>>([]); //口味数据
  const isIos: any = store.commonStore.isIos;
  //返回后无条件强制刷新
  useDidShow(() => {
    Taro.onNetworkStatusChange(getNetWorkStatus);
    getProductList();
  });
  //获取雪茄详情
  const getProductList = () => {
    productListFun({
      sku: params.sku,
      ucUserId: Taro.getStorageSync('userId'),
    })
      .then((res: any) => {
        setLoadingText('');
        console.log(res, 'res内容返回详情');
        if (res !== null) {
          const testVal =
            res &&
            res.productLineInfoList &&
            res.productLineInfoList.length > 0 &&
            res.productLineInfoList[selectId].cigarProductLineTasteDepict;
          const jsonStr =
            testVal && testVal.replace(/'/g, '"').replace(/：/g, ':');
          const arr = JSON.parse(jsonStr); // 安全且可靠
          setTastList(arr);
          setList(res);
        }
      })
      .catch((e: any) => {
        setLoadingText('');
      });
  };

  useEffect(() => {
    getProductList();
  }, []);
  const handleClick = (value: any) => {
    setCurrent(value);
  };
  //处理收藏按钮
  const handleCollect = () => {
    if (!store.commonStore.networkStatus) {
      Taro.showToast({ title: netWorkErrorInfo, icon: 'none' });
      return;
    }
    if (!isLoginFun()) return;
    if (list.isCollected || collect) {
      //取消收藏
      cancelCollectionFun({
        sku: params.sku,
        ucUserId: Taro.getStorageSync('userId'),
      }).then((res: any) => {
        console.log(res, '取消收藏成功');
        getProductList();
      });
    } else {
      //收藏雪茄
      collectionFun({
        sku: params.sku,
        ucUserId: Taro.getStorageSync('userId'),
      }).then((res: any) => {
        console.log(res, '收藏成功');
        getProductList();
      });
    }
  };
  //切换年份
  const handleYearClick = (val: any) => {
    if (!store.commonStore.networkStatus) {
      Taro.showToast({ title: netWorkErrorInfo, icon: 'none' });
      return;
    }
    setSelectId(val);
  };
  useEffect(() => {
    getProductList();
  }, [selectId]);
  console.log(list.productAwardInfo === null, 'list.productAwardInfo');
  return (
    <View
      className="ciga-detail-container"
      style={{
        paddingTop: `calc(${store.commonStore.pageAreaTop}rpx - 4rpx)`,
      }}
    >
      <TitleBar theme="light" showLeftBack={true} title="雪茄详情" />
      <View className={`ciga-detail-content ciga-detail-${isIos}`}>
        <AtTabs
          current={current}
          tabList={tabList}
          onClick={handleClick}
          className={'common-tab tab-3'}
        >
          <AtTabsPane current={current} index={0}>
            {/*品牌介绍*/}
            <View
              className="brand-container"
              style={{
                marginTop: `calc(${store.commonStore.safeAreaTop}rpx + 24rpx)`,
              }}
            >
              <Image className="brand-image" src={list.productImg} />
              <View className="brand-title">{list && list.productNameEn}</View>
              <View className="brand-name">{list && list.productName}</View>
              <View className="brand-desc">{}</View>
            </View>
            {/* 雪茄年份 */}
            <View className="brand-year">
              <View className="year">雪茄年份:</View>
              <View className="year-list">
                {list &&
                  list.productLineInfoList &&
                  list.productLineInfoList.map((item: any, index: any) => {
                    return (
                      <View key={item.id}>
                        <View
                          onClick={() => handleYearClick(index)}
                          className={classNames('year-desc', {
                            'year-desc-active': index === selectId,
                          })}
                        >
                          {item.cigarProductLineYear}
                        </View>
                      </View>
                    );
                  })}
              </View>
            </View>
            {/* 内容详情 */}
            <View className="brand-list">
              <View className="brand-list-item">
                <View className="brand-list-item-left">
                  <Text className="brand-list-item-left-desc">专业评分:</Text>
                  <View className="brand-list-rate">
                    <Text
                      className={classNames(
                        `brand-list-rate-number brand-list-rate-number-${list && list.productLineInfoList && list.productLineInfoList[selectId] && list.productLineInfoList[selectId].cigarProductLineProfessionalRating}`
                      )}
                      style={{
                        width: `${list && list.productLineInfoList && list.productLineInfoList[selectId] && list.productLineInfoList[selectId].cigarProductLineProfessionalRating}%`,
                      }}
                    ></Text>
                  </View>
                </View>
                <View className="brand-list-item-right">
                  {`${list && list.productLineInfoList && list.productLineInfoList[selectId] && list.productLineInfoList[selectId].cigarProductLineProfessionalRating}`}
                  分
                </View>
              </View>
              <View className="brand-list-item">
                <View className="brand-list-item-left">
                  <Text className="brand-list-item-left-desc">用户评分:</Text>
                  <View className="brand-list-rate">
                    <Text
                      className={classNames(
                        `brand-list-rate-number brand-list-rate-number-${list && list.productLineInfoList && list.productLineInfoList[selectId] && list.productLineInfoList[selectId].cigarProductLineUserRating}`
                      )}
                      style={{
                        width: `${list && list.productLineInfoList && list.productLineInfoList[selectId] && list.productLineInfoList[selectId].cigarProductLineUserRating}%`,
                      }}
                    ></Text>
                  </View>
                </View>
                <View className="brand-list-item-right">
                  {`${list && list.productLineInfoList && list.productLineInfoList[selectId] && list.productLineInfoList[selectId].cigarProductLineUserRating}`}
                  分
                </View>
              </View>
              <View className="brand-list-item">
                <View className="brand-list-item-left">
                  <Text className="brand-list-item-left-desc">浓郁度:</Text>

                  <View className="brand-list-rate">
                    <Text
                      className={classNames(
                        `brand-list-rate-number brand-list-rate-number-${list && list.productLineInfoList && list.productLineInfoList[selectId] && list.productLineInfoList[selectId].cigarProductLineIntensity}`
                      )}
                      style={{
                        width: `${list && list.productLineInfoList && list.productLineInfoList[selectId] && list.productLineInfoList[selectId].cigarProductLineIntensity}%`,
                      }}
                    ></Text>
                  </View>
                </View>
                <View className="brand-list-item-right">
                  {(list &&
                    list.productLineInfoList &&
                    list.productLineInfoList[selectId] &&
                    list.productLineInfoList[selectId]
                      .cigarProductLineIntensity) ||
                    0}
                </View>
              </View>
              <View className="brand-list-item taste">
                <View className="brand-list-item-left">口味：</View>
                <View className="brand-list-item-right">
                  {tastList &&
                    tastList.map((item: any, index: any) => {
                      const [key, value]: any = Object.entries(item)[0];
                      return (
                        <View className="right-item" key={index}>
                          <View className="center">
                            <View className="right-item-desc margibBottom2">
                              {key}
                            </View>
                            <View className="right-item-desc">{value}</View>
                          </View>
                        </View>
                      );
                    })}
                </View>
              </View>
              <View className="brand-list-item">
                <View className="brand-list-item-left">长度：</View>
                <View className="brand-list-item-right">
                  {list &&
                    list.productLineInfoList &&
                    list.productLineInfoList[selectId] &&
                    list.productLineInfoList[selectId].cigarProductLineLength}
                  mm
                </View>
              </View>
              <View className="brand-list-item">
                <View className="brand-list-item-left">环径：</View>
                <View className="brand-list-item-right">
                  {list &&
                    list.productLineInfoList &&
                    list.productLineInfoList[selectId] &&
                    list.productLineInfoList[selectId]
                      .cigarProductLineRingGauge}
                  Φ{' '}
                </View>
              </View>
              <View className="brand-list-item">
                <View className="brand-list-item-left">停产年份：</View>
                <View className="brand-list-item-right">
                  {(list &&
                    list.productLineInfoList &&
                    list.productLineInfoList[selectId] &&
                    list.productLineInfoList[selectId]
                      .cigarProductLineStopProductYear) ||
                    '未停产'}
                </View>
              </View>
              <View className="brand-list-item">
                <View
                  className="brand-list-item-left"
                  style={{ width: '100px' }}
                >
                  茄标描述：
                </View>
                <View className="brand-list-item-right">
                  {list &&
                    list.productLineInfoList &&
                    list.productLineInfoList[selectId] &&
                    list.productLineInfoList[selectId]
                      .cigarProductLineLabelDescribe}
                </View>
              </View>
              <View className="brand-list-item">
                <View className="brand-list-item-left">型号：</View>
                <View className="brand-list-item-right">
                  {list &&
                    list.productLineInfoList &&
                    list.productLineInfoList[selectId] &&
                    list.productLineInfoList[selectId].cigarProductLineSizeType}
                </View>
              </View>
              <View className="brand-list-item">
                <View className="brand-list-item-left">结构：</View>
                <View className="brand-list-item-right">
                  {list &&
                    list.productLineInfoList &&
                    list.productLineInfoList[selectId] &&
                    list.productLineInfoList[selectId]
                      .cigarProductLineStructure}
                </View>
              </View>
              <View className="brand-list-item">
                <View className="brand-list-item-left">产区：</View>
                <View className="brand-list-item-right">
                  {list &&
                    list.productLineInfoList &&
                    list.productLineInfoList[selectId] &&
                    list.productLineInfoList[selectId].cigarProductLineOrigin}
                </View>
              </View>
              {/* 包装规格 */}
              <View className="brand-list-standard">
                <View className="brand-list-standard-title">包装规格</View>
                <View className="brand-list-standard-desc">
                  {list.productLineInfoList &&
                    list.productLineInfoList[selectId] &&
                    list.productLineInfoList[selectId]
                      .cigarProductLinePackageNorms}
                </View>
              </View>
              {/* 综述 */}
              {list.productLineInfoList &&
                list.productLineInfoList[0] &&
                list.productLineInfoList[0]
                  .cigarProductLineComprehensiveDescription && (
                  <View className="brand-list-standard">
                    <View className="brand-list-standard-title">综述</View>
                    <View className="brand-list-standard-desc">
                      {list &&
                        list.productLineInfoList &&
                        list.productLineInfoList[0] &&
                        list.productLineInfoList[0]
                          .cigarProductLineComprehensiveDescription}
                      {/* <Image
                    mode="widthFix"
                    src={
                      'https://file.linkcook.cn/image/wineMiniProgram/wiki/brand.png'
                    }
                  /> */}
                    </View>
                  </View>
                )}
            </View>
          </AtTabsPane>
          {prize && (
            <AtTabsPane current={current} index={1}>
              {/* 获得奖项 */}
              {list.productAwardInfo === null && (
                <CommonBlank desc={'暂无奖项'} visible />
              )}

              <View className="prize-container">
                {list.productAwardInfo &&
                  list.productAwardInfo.map((item: any, index: any) => {
                    return (
                      <View className="prize-item" key={index}>
                        <View className="prize-year">{item.awardYear}</View>
                        <View className="prize-name clamp2">
                          {item.awardName}
                        </View>
                      </View>
                    );
                  })}
              </View>
            </AtTabsPane>
          )}
          <AtTabsPane current={current} index={2}>
            {/* 品牌介绍 */}
            <View
              className="brand-list-intro"
              style={{
                marginTop: `calc(${store.commonStore.safeAreaTop}rpx + 24rpx)`,
              }}
            >
              <Image
                className="brand-list-intro-logo"
                mode="widthFix"
                src="https://file.linkcook.cn/image/wineMiniProgram/wiki/brand.png"
              />
              <View className="brand-list-intro-title">Cohiba</View>
              <View className="brand-list-intro-name">高希霸</View>
              <View className="brand-list-intro-desc">
                高希霸最初是古巴革命领袖菲德尔·卡斯特罗的专属雪茄，由卷烟师爱德华多·里维拉秘密制作，1966年正式命名并成立品牌。其名称“Cohiba”源自泰诺印第安语，意为“卷烟叶”，体现了古巴原住民的烟草传统1982年进入国际市场。‌‌‌‌
              </View>
            </View>
          </AtTabsPane>
        </AtTabs>
      </View>
      {/* 分享和收藏 */}
      <View className="ciga-detail-footer">
        <View className="common-container flex">
          <View className="custom-share-item">
            <Button className="custom-share-wrapper" openType="share">
              <Image
                className="footer-icon"
                src={
                  'https://file.linkcook.cn/image/wineMiniProgram/home/share.png'
                }
              />
              <View className="share-btn">分享</View>
            </Button>
          </View>
          <View
            className="ciga-detail-footer-item"
            onClick={() => handleCollect()}
          >
            <Image src={list.isCollected ? collected : uncollect} />
            <View className="share-btn">收藏</View>
          </View>
        </View>
      </View>
    </View>
  );
};

export default observer(CigaDetail);
